<template>
  <el-card class="box-card">
    员工工资管理
    <hr>
    <br>
    <el-row style="display: flex;justify-content: flex-start;">
      <!--搜索框-->
      <span style="">
        <el-input v-model="keyword" style="width: 200px" placeholder="请输入员工名"
                  size="mini"></el-input>
        <el-button type="success" @click="selectTable" icon="el-icon-search"
                   size="mini" v-has="'salary:list'">搜索</el-button>
      </span>
    </el-row>
    <br>
    <br>
    <!--表格数据及操作-->
    <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable"
              tooltip-effect="dark">
      <!--索引-->
      <el-table-column type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="employeeName" label="姓名" sortable>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 0">女</span>
          <span v-if="scope.row.sex == 1">男</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200">
      </el-table-column>
      <el-table-column prop="phone" label="电话">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column prop="deptName" label="部门">
      </el-table-column>
      <el-table-column prop="positionName" label="职位">
      </el-table-column>
      <el-table-column prop="academicTitle" label="职称">
      </el-table-column>
      <el-table-column prop="educationalBackground" label="教育背景">
        <template slot-scope="scope">
          <span v-if="scope.row.educationalBackground == 0">大专</span>
          <span v-if="scope.row.educationalBackground == 1">本科</span>
          <span v-if="scope.row.educationalBackground == 2">博硕</span>
          <span v-if="scope.row.educationalBackground == 3">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="school" label="毕业学校">
      </el-table-column>
      <el-table-column prop="entryTime" label="入职时间" :formatter="dateForma" width="150">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status"
                     disabled
                     active-value="1"
                     inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="contractTerm" label="合同期" :formatter="dateForma" width="150">
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary"
                     v-has="'salary:upd'"
                     size="mini" @click="openTips(scope.row)">
            添加工资信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>

    <!--分页条-->
    <el-pagination
      style="padding-top:15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog title="添加工资信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="员工姓名">
          <el-input v-model="form.employeeName" disabled placeholder="请输入员工名"></el-input>
        </el-form-item>
        <el-form-item label="部门名">
          <el-input v-model="form.deptName" disabled placeholder="请输入部门名"></el-input>
        </el-form-item>
        <el-form-item label="工资月份">
          <el-date-picker
            v-model="form.salaryMonth"
            type="month"
            value-format="yyyy-MM"
            @change="selectCount"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="员工本月出勤情况" v-show="showInfo">
          <br>
          <el-row id="info">
            <el-col :span="6">
              <el-form-item label=" 迟到:(次)">
                <el-input style="display: inline-block;width: 50px;"
                          readonly
                          v-model="attendanceInfo.count1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label=" 早退:(次)">
                <el-input style="display: inline-block;width: 50px;"
                          readonly
                          v-model="attendanceInfo.count2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="   缺勤:(次)">
                <el-input style="display: inline-block;width: 50px;"
                          readonly
                          v-model="attendanceInfo.count3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label=" 请假:(次)">
                <el-input style="display: inline-block;width: 50px;"
                          readonly
                          v-model="attendanceInfo.count4"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="基本工资">
          <el-input v-model="form.mustSalary" @change="coumperSalary" type="number"
                    placeholder="请输入基本工资"></el-input>
        </el-form-item>
        <el-form-item label="全勤工资">
          <el-input v-model="form.realitySalary" @change="coumperSalary" type="number"
                    placeholder="请输入全勤工资"></el-input>
        </el-form-item>
        <el-form-item label="迟到扣款">
          <el-input v-model="form.fundAmount" @change="coumperSalary" type="number"
                    placeholder="请输入迟到扣款"></el-input>
        </el-form-item>
        <el-form-item label="请假扣款">
          <el-input v-model="form.taxAmount" @change="coumperSalary" type="number"
                    placeholder="请输入请假扣款"></el-input>
        </el-form-item>
        <el-form-item label="个税">
          <el-input v-model="form.pensionAmount" @change="coumperSalary" type="number"
                    placeholder="请输入个税"></el-input>
        </el-form-item>
        <el-form-item label="五险一金">
          <el-input v-model="form.injuredMount" @change="coumperSalary" type="number"
                    placeholder="请输入五险一金"></el-input>
        </el-form-item>
        <el-form-item label="合计工资">
          <el-input v-model="form.totalSalary" type="number" placeholder="合计工资"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSarlary">确 定</el-button>
      </div>
    </el-dialog>

    <br>
    <el-divider>工资管理列表</el-divider>
    <br>
    <!--表格数据及操作-->
    <el-table :data="tableData2" border style="width: 100%" stripe ref="multipleTable"
              tooltip-effect="dark">
      <!--索引-->
      <el-table-column type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="employeeName" label="姓名">
      </el-table-column>
      <el-table-column prop="salaryMonth" label="工资月份" :formatter="dateForma2" sortable>
      </el-table-column>
      <el-table-column prop="mustSalary" label="基本工资">
      </el-table-column>
      <el-table-column prop="realitySalary" label="全勤工资">
      </el-table-column>
      <el-table-column prop="fundAmount" label="迟到扣款">
      </el-table-column>
      <el-table-column prop="taxAmount" label="请假扣款">
      </el-table-column>
      <el-table-column prop="pensionAmount" label="个税">
      </el-table-column>
      <el-table-column prop="injuredMount" label="五险一金">
      </el-table-column>
      <el-table-column prop="totalSalary" label="合计工资">
      </el-table-column>
    </el-table>

    <!--分页条-->
    <el-pagination
      style="padding-top:15px"
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
      :current-page="current2"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize2"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total2"
    ></el-pagination>
  </el-card>
</template>

<script>
  import moment from 'moment'

  export default {
    name: "salary",
    data() {
      return {
        tableData: [],   //表格数据
        tableData2: [],   //表格数据
        keyword: '',   //查询输入框数据
        total: 0, // 总条数
        pageSize: 10,     // 每页显示的条数
        current: 1,  // 当前页码

        total2: 0, // 总条数
        pageSize2: 10,     // 每页显示的条数
        current2: 1,  // 当前页码

        attendanceInfo: "",
        dialogFormVisible: false,
        showInfo: false,
        deptList: [],
        thisUserId: "",
        form: {
          salaryMonth: "",
          employeeName: "",
          eid: "",
          totalSalary: 0,
          injuredMount: 0,
          pensionAmount: 0,
          taxAmount: 0,
          fundAmount: 0,
          realitySalary: 0,
          mustSalary: 0
        }
      }
    },
    methods: {
      /**
       * 日期格式化
       * @param row
       * @param column
       * @returns {string}
       */
      dateForma(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD")
      },
      /**
       * 日期格式化
       * @param row
       * @param column
       * @returns {string}
       */
      dateForma2(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM")
      },
      /**
       * 表格索引
       * @param index
       * @returns {*}
       */
      indexMethod(index) {
        return index;
      },
      /**
       * 监听数据表格每页条数变化并更新表格数据
       * @param val
       */
      handleSizeChange(val) {
        this.getTableDate(val, this.current, null);
      },
      /**
       * 监听页码变化并更新表格
       * @param val
       */
      handleCurrentChange(val) {
        this.getTableDate(this.limit, val, null);
      },
      /**
       * 监听数据表格每页条数变化并更新表格数据
       * @param val
       */
      handleSizeChange2(val) {
        this.getAttendanceTableDate(val, this.current2, null);
      },
      /**
       * 监听页码变化并更新表格
       * @param val
       */
      handleCurrentChange2(val) {
        this.getAttendanceTableDate(this.limit, val, null);
      },
      /**
       * 关键字查询
       */
      selectTable() {
        this.getTableDate(this.limit, this.current, this.keyword);
      },
      /**
       * 获取表格数据
       * @param limit
       * @param page
       * @param keyword
       */
      getTableDate(limit, page, keyword) {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employee/listAllEmployee',
          data: {
            limit: limit,
            page: page,
            employeeName: keyword
          }
        }).then((response) => {
          if (response.data.msg != "SUCCESS") {
            this.$message.error(response.data.msg);
          }
          this.tableData = response.data.data.records;
          this.total = response.data.data.total; //totalcount
          this.current = response.data.data.current; //页数
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 清空弹层值
       */
      clearValue() {
        Object.keys(this.form).forEach((key) => (this.form[key] = ''))
      },
      /**
       * 获取全部部门名
       */
      getDept() {
        this.$axios({
          method: 'post',
          url: 'http://127.0.0.1:8080/dept/listAllDeptName',
        }).then((response) => {
          this.deptList = response.data.data;
        }).catch((error) => {
          console.log(error)
        })
      },
      openTips(row) {
        this.dialogFormVisible = true;
        this.showInfo = false;
        this.form.employeeName = row.employeeName;
        this.form.eid = row.id;
        this.form.deptName = row.deptName;
      },
      /**
       * 添加工资
       * */
      addSarlary() {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employeeSalary/salary',
          data: {
            salaryMonth: this.form.salaryMonth,
            employeeName: this.form.employeeName,
            totalSalary: this.form.totalSalary,
            eid: this.form.eid,
            injuredMount: this.form.injuredMount,
            pensionAmount: this.form.pensionAmount,
            taxAmount: this.form.taxAmount,
            realitySalary: this.form.realitySalary,
            mustSalary: this.form.mustSalary,
            fundAmount: this.form.fundAmount,
            createBy: localStorage.getItem("uId")
          }
        }).then((response) => {
          this.$message.success(response.data.msg);
          this.clearValue()
          this.dialogFormVisible = false;
          this.getAttendanceTableDate(this.pageSize, this.current);
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 获取工资数据
       * @param limit
       * @param page
       * @param keyword
       */
      getAttendanceTableDate(limit, page) {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employeeSalary/salarys',
          data: {
            limit: limit,
            page: page
          }
        }).then((response) => {
          if (response.data.msg != "SUCCESS") {
            this.$message.error(response.data.msg);
          }
          this.tableData2 = response.data.data.records;
          this.total2 = response.data.data.total; //totalcount
          this.current2 = response.data.data.current; //页数
        }).catch((error) => {
          console.log(error)
        })
      },
      coumperSalary() {
        this.form.totalSalary =
          Number(this.form.mustSalary) +
          Number(this.form.realitySalary) -
          Number(this.form.fundAmount) -
          Number(this.form.taxAmount) -
          Number(this.form.pensionAmount) -
          Number(this.form.injuredMount);
      },
      selectCount() {
        this.$axios({
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employeeAttendance/getAttendanceInfo?eid=' + this.form.eid + '&mounth=' + this.form.salaryMonth,
        }).then((response) => {
          this.showInfo = true;
          this.attendanceInfo = response.data.data;
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    created() {
      /**
       * 页面渲染调用一次获取表格
       */
      this.getTableDate(this.pageSize, this.current);
      this.getDept();
      this.getAttendanceTableDate(this.pageSize, this.current)
    }
  }
</script>

<style scoped>
  #info >>> .el-input__inner {
    border: 0;
  }
</style>
